<template>
  <ul class="category">
    <li
      v-for="v of $store.state.Category.list"
      :key="v.id"
      :class="{ select: v.id === $store.state.Category.cur }"
      @click="onClickCategory(v.id)"
    >
      {{ v.name }}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Category',
  created() {
    this.$store.dispatch('Category/getList')
  },
  methods: {
    onClickCategory(id) {
      this.$store.commit('Category/updateCur', id)

      // 当 激活频道 发生变化时，要重新获取新闻列表
      // 若要对组件开发者友好一点，Vuex的封装者，应该考虑自动触发这个行为
      // this.$store.dispatch('NewList/getList')
    },
  },
}
</script>
